<template>
	<div class="view">
		<span v-if="data.isRelated == 1" style="color: red; font-size: 16px; font-weight: bold;">
			*
		</span>
		<span 
			class="et-item"
			v-for="(item, index) in JSON.parse(data.etNames)" 
			v-text="item"
			:class="{'et-item-hide': index >= JSON.parse(data.etNames).length - data.hideIndex}"
			@click="click2Item(index)">
		</span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			click2Item: function (index) {
				if(index == 0)
					return;
				this.$emit('on-click', this.data, JSON.parse(this.data.etNames).length - index);
		    }	
		},
		props: ['data']
	}
</script>

<style scoped="scoped">
	.et-item {
		cursor: pointer;
		color: #000000;
		margin-right: 10px;
	}
	
	.et-item:hover {
		color: #999;
	}
	
	.et-item-hide {
		border: 1px dashed #666;
		color: red !important;
		display: block;
		margin-top: 10px;
		padding: 6px;
	}
</style>